<template>
  <div class="collection">
    <div class="wrapper">
      <div class="header">
        <router-link
          tag="div"
          to="/my"
          class="header_left iconfont icon-guanbi"
        ></router-link>
        <div class="header_center">我的收藏</div>
        <div class="header_right" @click="edit" v-show="editing">编辑</div>
        <div class="header_right" @click="editer" v-show="!editing">完成</div>
      </div>
      <div class="collectionlist">
        <ul>
          <li  v-for="(item,index) in FavoritesList" :key="item.productId" @click="information(item.productId,item.productImg)" ref="move">
            <div :class="['chose',!editing?'con':'',item.check?'checked':'']" @click.stop="check(index)"></div>
            <div :class="['big',!editing?'con':'']">
              <div class="left">
              <img :src="item.productImg" alt="">
            </div>
            <div class="right">
              <div class="rightTitleone">{{item.informationTitleOne}}</div>
              <div class="rightTitletwo">
                {{item.informationTitleTwo}}
              </div>
              <div class="rightbottom">
                <div class="price">
                  <div class="newprice">
                    <strong>￥<span>{{item.sellPrice}}</span>起</strong>
                  </div>
                  <div class="oldprice"><del>￥{{item.retailPrice}}</del></div>
                </div>
                <div class="Sold">已售12345</div>
              </div>
            </div>
            </div>
          </li>
        </ul>
      </div>

      <div :class="['tab',!editing?'con':'']">
        <div class="tab_left" @click="allcheck">
          <div :class="['all',allchecks?'con':'']"></div>
          <p>全选</p>
        </div>
        <div :class="['tab_right',num!=0?'con':'']" @click="del" >删除<span v-show="num!=0">({{num}})</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        FavoritesList:null,
        editing:true,
        allchecks:false,
        num:0,
    };
  },
  methods:{
    information(id,img){
      this.$router.push("/details?back=/my&productId="+id+"&productImg="+img)
    },
    edit(){
      console.log(this.$refs.move);
      // let len=this.$refs.move.length
      // for(let i=0;i<len;i++){

      //   this.$refs.move[i].style.left="30px"
      // }
      this.editing=false
    },
    editer(){
      this.editing=true
    },
    check(index){
      this.FavoritesList[index].check=!this.FavoritesList[index].check
      let all= this.FavoritesList.every(item=>{
        return item.check==true
      })

      if(all){
        this.allchecks=true
      }else{
        this.allchecks=false
      }

      let num=this.FavoritesList.reduce((total,item)=>{
          if(item.check==true){
            console.log(total);
            return total+=1
          }else{
            return total
          }
      },0)
      this.num=num
    },
    allcheck(){
      this.allchecks=!this.allchecks
      this.FavoritesList.forEach(item=>{
        item.check=this.allchecks
      })

      let num=this.FavoritesList.reduce((total,item)=>{
          if(item.check==true){
            console.log(total);
            return total+=1
          }else{
            return total
          }
      },0)
      this.num=num
    },
    del(){
      this.FavoritesList= this.FavoritesList.filter(item=>{
        return item.check==false
      })
      window.localStorage.setItem(
            "Collection",
            JSON.stringify(this.FavoritesList)
          );
    }
  },
  created() {
    if (JSON.parse(localStorage.getItem("Collection"))) {
      this.FavoritesList = JSON.parse(localStorage.getItem("Collection"));
    }
    console.log(this.FavoritesList);
  },
};
</script>

<style lang="scss" scoped>
.collection {
  height: 100%;
  background-color: #f0edeb;
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    .header {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 5;

      .header_left {
        color: #fc9632;
        font-size: 20px;
        line-height: 50px;
      }
      .header_center {
        font-size: 18px;
        padding-left: 30px;
      }
      .header_right {
        color: #fc9632;
      }
    }
    .collectionlist {
      ul {
        overflow: hidden;
          margin: 0 16px;
        li.con{
          transform: translateX(30px);
        } 
        li {
          
          padding: 10px 0;
          position: relative;
          // display: flex;
          // justify-content: space-between;
          // align-items: center;
          border-top: 1px solid rgb(227, 222, 222);
          .chose.con{
            opacity: 1;
          }
          .chose.checked{
            border: none;
            background: url(../assets/img/4k.png) no-repeat;
            background-size: 100%;
          }
          .chose{
            transition: all 0.5s linear;
            opacity: 0;
            position: absolute;
            top: 50px;
            left: 0;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border: 1px solid #999;
            border-radius: 50%;
            margin-right: 10px;
          }
          .big.con{
            transform: translateX(30px);
          }
          .big{
            transition: all 0.5s linear;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
              width: 120px;
              height: 80px;
              background-color: #fc9632;
              img{
                  width: 100%;
                  height: 100%;
              }
            }
            .right {
              width: 210px;
              .rightTitleone {
                width: 200px;
                color: #332416;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
              }
              .rightTitletwo {
                font-size: 15px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                color: #877d74;
              }
              .rightbottom {
                font-size: 13px;
                color: #877d74;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .price {
                  display: flex;
                  align-items: center;
                  .newprice {
                    color: red;
                    font-size: 13px;
                    padding-right: 10px;
                    border-right: 1px solid #ccc;
                    span {
                      font-size: 18px;
                    }
                  }
                  .oldprice {
                    padding-left: 10px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .tab.con{
      bottom: 0px;
    }
    .tab{
      transition: all 0.5s linear;
      position: fixed;
      bottom: -50px;
      left: 0;
      width: 100%;
      background-color: #fff;

      height: 50px;
      display: flex;
      align-items: center;
    justify-content: space-between;
      .tab_left{
              padding: 0 16px;
        display: flex;
        align-items: center;
        .all{
          width: 30px;
          height: 30px;
          background-color: #fdecdc;
          border-radius: 50%;
        }
        .all.con{
          background: url(../assets/img/4k.png) no-repeat;
            background-size: 100%;
        }
        p{
          padding-left: 10px;
          color: #fc9632;
        }
      }
      .tab_right{
        margin: 0 16px;
        width: 200px;
        text-align: center;
        color: #fff;
        height: 30px;
        line-height: 30px;
        background-color: #fabd7f;
      }
      .tab_right.con{
        background-color: #fb8612;
      }
    }
  }
}
</style>